<template>
  <view class="video_play">
    <view class="img_wrap">
      <image
        :src="videoObj.img"
        mode="scaleToFill"
      />
    </view>
    <!-- 按钮部分 -->
    <view class="icon_wrap">
      <view
        :class="['iconfont', muted? 'iconjingyin':'iconshengyin']"
        @click="handleMuted"
      ></view>

      <view class="iconfont iconzhuanfa">
        <button open-type="share"> </button>
      </view>

    </view>
    <!-- 视频部分 -->
    <view class="video_wrap">
      <video
        :src="videoObj.video"
        :muted="muted"
        objectFit="fill"
      ></video>
    </view>
    <view class="video_btn">
      <view
        class="text"
        @click="handleDownFile"
      >下载高清</view>

    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      // 用来存放视频对象
      videoObj: {},
      // 是否静音
      muted: false
    }
  },
  onLoad () {
    // console.log(getApp().globalData);
    this.videoObj = getApp().globalData.video
    console.log(this.videoObj);

  },
  methods: {
    // 开关声音
    handleMuted () {
      this.muted = !this.muted
    },
    // 下载文件按钮
    async handleDownFile () {
      // 显示下载中的动画效果
      uni.showLoading({ title: '下载中' })
      const res = await uni.downloadFile({ url: this.videoObj.video })
      // 获取缓存文件
      const tempFilePath = res[1].tempFilePath
      // 将临时地址存放到相册系统【注意区别接口的名称上有所区别】
      await uni.saveVideoToPhotosAlbum({ filePath: tempFilePath })
      uni.showToast({ title: '下载成功' })
      // 隐藏下载中的动画效果
      uni.hideLoading()
    }
  }
}
</script>

<style lang="scss" scope>
.video_play {
  position: relative;
  .img_wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    image {
      width: 100%;
      height: 100%;
      // 实现毛玻璃效果
      -webkit-filter: blur(10px); /* Chrome, Opera */
      -moz-filter: blur(10px);
      -ms-filter: blur(10px);
      filter: blur(10px);
    }
  }
  .icon_wrap {
    display: flex;
    justify-content: flex-end;
    .iconfont {
      width: 70rpx;
      height: 70rpx;
      border-radius: 70rpx;
      background-color: #000000;
      opacity: 0.5;
      font-size: 50rpx;
      color: #ffffff;
      text-align: center;
      line-height: 70rpx;
      margin: 0 20rpx;
      position: relative;
      button {
        border-radius: 100%;
        opacity: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
      }
    }
    .iconfont.iconshengyin {
    }

    .iconfont.iconzhuanfa {
    }
  }

  .video_wrap {
    text-align: center;
    margin-top: 20rpx;
    video {
      width: 63vw;
      height: 69vh;
    }
  }

  .video_btn {
    display: flex;
    justify-content: center;
    .text {
      height: 70rpx;
      margin: 20rpx auto;
      //   background-color: rgba(0, 0, 0, 0.2);
      background-color: #000;
      opacity: 0.7;
      border: 1px solid #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 100rpx;
      border-radius: 70rpx;
      color: #ffffff;
    }
  }
}
</style>